import React, { FC, useEffect, useState, useRef } from 'react';
import { Form, Input, Button, message } from 'antd';
import { Layout } from 'antd';
import { useLocation } from 'react-router';
// 引入css样式
import "../../static/css/wrieoff/add.css"
import { useNavigate } from 'react-router';
// 引入封装调接口数据
import { PostAdd, GetList, GetUpda , PostUpda} from '../../apis/writeoff/add';
// 部门
import { Cascader } from 'antd';

import { Switch } from 'antd';

interface IOptions {
   id: number,
   name: string,
   parent_id: number,
   user: string,
   user_mobile: number | null,
   openid: null | number,
   son: Array<IOptions>,
}

const WrieoffAdd: FC = (): JSX.Element => {
   // 创建useState

   const [text, setText] = useState('添加')

   // 定义跳转 
   const navigate = useNavigate()
   // 定义useLocation跳转

   const { state }: any = useLocation()
   // console.log(state);

   // 调根据id对比查询整条数据
   const upda = () => {
      GetUpda({
         header: {
            Authorization: sessionStorage.getItem("token")
         },
         id: state
      }).then((res: any) => {
         // console.log(res);
         if (res.code === "00000") {
            // setData(res.data)
            setText("修改")
            from.current.setFieldsValue(res.data)
         }
      })
   }

   // 调用useRef
   const from: any = useRef()
   // 获取到的值
   const onFinish = (values: any) => {
      // console.log(values);
      if (!state) {
         // 添加数据 
         PostAdd({
            "reviewer_name": values.reviewer_name,
            "openid": values.openid,
            "mobile": values.mobile,
            "department": values.department.slice(-1)[0],
            "job": values.job,
            "is_use": values.is_use,
         }).then((res: any) => {
            // console.log(res);
            if (res.code === "00000") {
               message.success("添加成功")
               navigate("/writeoff/WrieoffList")
            } else {
               message.error(res.msg)
            }
         })
      }else{
         PostUpda({
            "id": state,
            "formdata": {
               "reviewer_name": values.reviewer_name,
               "openid": values.openid,
               "mobile": values.mobile,
               "department": values.department.slice(-1)[0],
               "job": values.job,
               "is_use": values.is_use
            }
         }).then((res:any)=>{
            if (res.code === "00000") {
               message.success("修改成功")
               navigate("/writeoff/WrieoffList")
            } else {
               message.error(res.msg)
            }
         })
      }
   };
   const layout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
   };

   const cancel = () => {
      navigate("/writeoff/WrieoffList")
   }
   // 级级联动
   const fieldName = { label: 'name', value: 'id', children: 'son' }

   const [eee, sete] = useState()
   const [par, setpar] = useState()
   const ww = async () => {
      const res: any = await GetList();
      // console.log(res);
      if (res.code === '00000') {
         sete(res.data)
      }
   }
   useEffect(() => {
      ww()
      upda()
   }, [par])

   return (
      <div className='writeoffadd'>
         <h3>添加</h3>
         <Layout>
            <Form {...layout} name="nest-messages" onFinish={onFinish} ref={from}>
               <Form.Item name={['reviewer_name']} label="审核人姓名" rules={[{ required: true }]}>
                  <Input placeholder='请输入审核人姓名' />
               </Form.Item>
               <Form.Item name={['openid']} label="openid" rules={[{ required: true }]}>
                  <Input placeholder='请输入openid' />
               </Form.Item>
               <Form.Item name={['mobile']} label="手机号">
                  <Input placeholder='请输入手机号' />
               </Form.Item>
               <Form.Item name={['department']} label="部门">
                  <Cascader options={eee} fieldNames={fieldName} placeholder="请选择部门" size='small' className='depa' />
               </Form.Item>
               <Form.Item name={['job']} label="职务" rules={[{ required: true }]}>
                  <Input placeholder='请输入职务' />
               </Form.Item>
               <Form.Item name={['is_use']} valuePropName="checked" label="是否启用">
                  <Switch defaultChecked />
               </Form.Item>
               <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                  <Button type="primary" onClick={cancel}>
                     取消
                  </Button>
                  <Button type="primary" htmlType="submit">
                     {
                        // !state ? '添加' : '修改'
                        text
                     }
                  </Button>
               </Form.Item>
            </Form>
         </Layout>
      </div>
   )
}

export default WrieoffAdd;